<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1.引入vue.js核心包 -->
    <script src="js/vue.js"></script>
  </head>
  <body>
    <!-- root容器 仅有一个 -->
    <!-- 2.通过简洁的模版语法将内容渲染到DOM系统里 -->
    <!-- {{表达式}} 差值语法 -->
    <div id="app">
        {{message}}
        <!-- 表达式   -->
        你好，{{name.toUpperCase()}},{{address}}
        你好，{{name.toUpperCase()}},{{address}}
        你好，{{name.toUpperCase()}},{{address}}
        你好，{{name.toUpperCase()}},{{address}}
        你好，{{name.toUpperCase()}},{{address}}
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;//阻止Vue生产提示

    //创建Vue对象 参数是配置对象信息
  new Vue({
    el: "#app",//el用于指定当前Vue实例为哪个容器服务 值通常为css选择器字符串
    data: {//data中用于存储数据 数据提供给el指定的容器去使用 值暂时写成一个对象
      message: "Hello C!",
      name:'jack',
      address:'成都'
    },
  });





</script>

<!-- 
Vue：
Vue类似于View,Vue是一套用来动态构建用户界面的渐进式javascript框架
 -构建用户界面：把数据通过某个办法变成用户想要的界面 数据+界面
 -渐进式：Vue可以自底层向上逐层应用，简单应用只需要一个核心库，复杂应用可以引入各种各样的Vue插件
 版本：vue2.x vue3.x

 特点：
 遵循MVVM模式  
 简洁运行效率高
 组件化模式，每个内容称为一个vue组件包含html+css+js  使用时引入vue组件
 声明式编码 用指令和表达式语法渲染数据


 初识Vue:
 前置工作：
    浏览器安装Vue Devtools插件
    标签引入vue.js包
    准备容器
    创建Vue实例
理解：
Vue要想工作，必须创建Vue实例且要传入一个配置对象  new Vue({})
root容器里的代码依然遵循HTML规范，不过添加了一些特殊的Vue语法
root容器中的代码称为Vue模版
Vue对象实例和容器是一一对应的
真实开发中只有一个Vue实例 并且配合组件xxx.vue一起使用
{{xxxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 
注意区别：js表达式 & js代码（语句 ）
  -表达式：一个表达式只会产生一个值，可以放在任何需要值的地方
    a  a+b  demo(1) x === y?"a":"b"
  -语句:
  if()  for()

  一旦data中数据发生变化，那么模版中用到该数据的地方也会自动更新
  
 


 -->
